<script setup>
defineProps({
  // 文章分类列表
  title: {
    type: String,
    default: () => ''
  }
})
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header flex">
        <span class="title">{{ title }}</span>

        <!-- 右侧的具名插槽 -->
        <slot></slot>
      </div>
    </template>
    <slot name="extra" class="extra"></slot>
    <!-- 文章管理... -->
  </el-card>
</template>

<style lang="scss" scoped>
.box-card {
  height: 75vh;

  .card-header {
    justify-content: space-between;
    align-items: center;
  }

  .extra {
    height: 30vh;
  }

  :deep .el-table {
    height: 335px;
  }
}
</style>
